<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>

<script type="text/javascript">

        var errs=new Array()
		var v = 1;
		var max = 758;
		var _ask= "";
        $(function () {
			
            $("document").ready(
                function () {
                $.getJSON("json/1.json", function (data) {
                    var question = "";//存储数据的变量
                    var s1 = "";
                    var s2 = "";
                    var s3 = "";
                    var s4 = "";
                    var $qtip = $("#question");
                    var $s1tip = $("#s1");
                    var $s2tip = $("#s2");
                    var $s3tip = $("#s3");
                    var $s4tip = $("#s4");
                    $qtip.empty();//清空内容
                    $s1tip.empty();//清空内容
                    $s2tip.empty();//清空内容
                    $s3tip.empty();//清空内容

                    $s4tip.empty();//清空内容
                    $.each(data, function (haha, info) {
                        question = info["question"];
                        s1 = info["s1"];
                        s2 = info["s2"];
                        s3 = info["s3"];
                        s4 = info["s4"];
						_ask = info["ask"];
                    })
                    $qtip.html(question);//显示处理后的数据
                    $s1tip.html(s1);
                    $s2tip.html(s2);
                    $s3tip.html(s3);
                    $s4tip.html(s4);
                });
				if(v<=1){
					$("#btn1").parent().css("display","none");
				}

            }),
			
			$("#btn2").click(
                function () {
				v++;
                $.getJSON("json/"+v+".json", function (data) {
                    
                    var question = "";//存储数据的变量
                    var s1 = "";
                    var s2 = "";
                    var s3 = "";
                    var s4 = "";
					
                    var $qtip = $("#question");
                    var $s1tip = $("#s1");
                    var $s2tip = $("#s2");
                    var $s3tip = $("#s3");
                    var $s4tip = $("#s4");
                    $qtip.empty();//清空内容
                    $s1tip.empty();//清空内容
                    $s2tip.empty();//清空内容
                    $s3tip.empty();//清空内容

                    $s4tip.empty();//清空内容
                    $.each(data, function (haha, info) {
                        question = info["question"];
                        s1 = info["s1"];
                        s2 = info["s2"];
                        s3 = info["s3"];
                        s4 = info["s4"];
						_ask = info["ask"];
                    })
                    $qtip.html(question);//显示处理后的数据
                    $s1tip.html(s1);
                    $s2tip.html(s2);
                    $s3tip.html(s3);
                    $s4tip.html(s4);
                });
				$(".ask").each(function(){
					$(this).removeClass('ui-radio-on');
					$(this).addClass('ui-radio-off');
				});
				if(v>1){
					$("#btn1").parent().css("display","block");
				}
				if(v>=max){
					$("#btn2").parent().css("display","none");
				}else{
					$("#btn2").parent().css("display","block");
				}
            }),
			
            $("#btn1").click(
                function () {
				v--;
                $.getJSON("json/"+v+".json", function (data) {
                    
                    var question = "";//存储数据的变量
                    var s1 = "";
                    var s2 = "";
                    var s3 = "";
                    var s4 = "";
                    var $qtip = $("#question");
                    var $s1tip = $("#s1");
                    var $s2tip = $("#s2");
                    var $s3tip = $("#s3");
                    var $s4tip = $("#s4");
                    $qtip.empty();//清空内容
                    $s1tip.empty();//清空内容
                    $s2tip.empty();//清空内容
                    $s3tip.empty();//清空内容

                    $s4tip.empty();//清空内容
                    $.each(data, function (haha, info) {
                        question = info["question"];
                        s1 = info["s1"];
                        s2 = info["s2"];
                        s3 = info["s3"];
                        s4 = info["s4"];
						_ask = info["ask"];
                    })
                    $qtip.html(question);//显示处理后的数据
                    $s1tip.html(s1);
                    $s2tip.html(s2);
                    $s3tip.html(s3);
                    $s4tip.html(s4);
                });
				if(v<=1){
					$("#btn1").parent().css("display","none");
				}
				if(v>=max){
					$("#btn2").parent().css("display","none");
				}else{
					$("#btn2").parent().css("display","block");
				}
				$(".ask").each(function(){
					$(this).removeClass('ui-radio-on');
					$(this).addClass('ui-radio-off');
				});
            })
			
        });
		function changetype(data){
			//console.log("dddddd "+data+"   "+_ask+" "+v);
			
			if(data == _ask){
				var str = $('#s'+data).html();
				str+="<a class='ui-icon-check ui-btn-icon-right'/>";
				$('#s'+data).html(str);
                 errs[''+v]=0
			}
			else{
				var str = $('#s'+data).html();
				str+="<a class='ui-icon-delete ui-btn-icon-right'/>";
				$('#s'+data).html(str);

				var str1 = $('#s'+_ask).html();
				str1+="<a class='ui-icon-check ui-btn-icon-right'/>";
				$('#s'+_ask).html(str1);
                errs[''+v]=1
			}
            var errstr = "";
            for(var key in errs){ // 输出字典元素，如果字典的key是数字，输出时会自动按序输出
                if(errs[key]==1){
                    errstr += "<a href='#' style='float:left' class='ui-btn' onclick='jumpErrPage("+key+")'> "+key+" </a>";
                }
            }
            $("#err").html(errstr);
		};
        function jumpErrPage(p){
            v = p;
            $.getJSON("json/"+p+".json", function (data) {
                    
                    var question = "";//存储数据的变量
                    var s1 = "";
                    var s2 = "";
                    var s3 = "";
                    var s4 = "";
					
                    var $qtip = $("#question");
                    var $s1tip = $("#s1");
                    var $s2tip = $("#s2");
                    var $s3tip = $("#s3");
                    var $s4tip = $("#s4");
                    $qtip.empty();//清空内容
                    $s1tip.empty();//清空内容
                    $s2tip.empty();//清空内容
                    $s3tip.empty();//清空内容

                    $s4tip.empty();//清空内容
                    $.each(data, function (haha, info) {
                        question = info["question"];
                        s1 = info["s1"];
                        s2 = info["s2"];
                        s3 = info["s3"];
                        s4 = info["s4"];
						_ask = info["ask"];
                    })
                    $qtip.html(question);//显示处理后的数据
                    $s1tip.html(s1);
                    $s2tip.html(s2);
                    $s3tip.html(s3);
                    $s4tip.html(s4);
                });
				$(".ask").each(function(){
					$(this).removeClass('ui-radio-on');
					$(this).addClass('ui-radio-off');
				});
				if(v>1){
					$("#btn1").parent().css("display","block");
				}else {
					$("#btn1").parent().css("display","none");
				}
				if(v>=max){
					$("#btn2").parent().css("display","none");
				}else{
					$("#btn2").parent().css("display","block");
				}
        };
		function jumpPage(){
			var name = $('input[name="search"]').val();
			var tv = 1;
			if(v==max){
				tv = max;
			}
			v =	parseInt(name);
			if(v>max){
				v = tv;
				alert("最大页码是"+max+"页");
				return;
			}
			$.getJSON("json/"+v+".json", function (data) {
                    
                    var question = "";//存储数据的变量
                    var s1 = "";
                    var s2 = "";
                    var s3 = "";
                    var s4 = "";
					
                    var $qtip = $("#question");
                    var $s1tip = $("#s1");
                    var $s2tip = $("#s2");
                    var $s3tip = $("#s3");
                    var $s4tip = $("#s4");
                    $qtip.empty();//清空内容
                    $s1tip.empty();//清空内容
                    $s2tip.empty();//清空内容
                    $s3tip.empty();//清空内容

                    $s4tip.empty();//清空内容
                    $.each(data, function (haha, info) {
                        question = info["question"];
                        s1 = info["s1"];
                        s2 = info["s2"];
                        s3 = info["s3"];
                        s4 = info["s4"];
						_ask = info["ask"];
                    })
                    $qtip.html(question);//显示处理后的数据
                    $s1tip.html(s1);
                    $s2tip.html(s2);
                    $s3tip.html(s3);
                    $s4tip.html(s4);
                });
				$(".ask").each(function(){
					$(this).removeClass('ui-radio-on');
					$(this).addClass('ui-radio-off');
				});
				if(v>1){
					$("#btn1").parent().css("display","block");
				}else {
					$("#btn1").parent().css("display","none");
				}
				if(v>=max){
					$("#btn2").parent().css("display","none");
				}else{
					$("#btn2").parent().css("display","block");
				}
		}
</script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
  <h1>选择题</h1>
  </div>
    
  <div data-role="main" class="ui-content">
    
    <form method="post" action="">
      
        <p id="question"></p>
        <div data-role="controlgroup">
          <label id="s1" class="ask" for="ss1"></label>
          <input type="radio" name="ask" id="ss1" value="1" onclick = "changetype(1)">
          <label id="s2" class="ask" for="ss2"></label>
          <input type="radio" name="ask" id="ss2" value="2" onclick = "changetype(2)">
          <label id="s3" class="ask" for="ss3"></label>
          <input type="radio" name="ask" id="ss3" value="3" onclick = "changetype(3)">
          <label id="s4" class="ask" for="ss4"></label>
          <input type="radio" name="ask" id="ss4" value="4" onclick = "changetype(4)">
        </div>  
        <div class="loadTitle">
            <input type="button" value="上一题" id="btn1"/>
            <input type="button" value="下一题" id="btn2"/>
        </div>
    </form>
	<form method="get" action="" onkeydown="if(event.keyCode==13){return false;}" οnsubmit="return jumpPage();">
      <div class="ui-field-contain">
        <label for="search">跳转到:</label>
        <input type="number" name="search" id="search" placeholder="直接跳转到题...">
      </div>
      <input type="button" name='jump_page' id='jump' value="提交" onclick = "jumpPage()">
    </form> 
    <p>错题有：</p>
    <div id="err" data-role="controlgroup" data-type="horizontal"></div>
  </div>
</div>



</body>
</html>
